<template>
  <view class="notification-settings">
    <view class="settings-section">
      <view class="section-title">通知设置</view>
      
      <!-- 推送通知总开关 -->
      <view class="setting-item">
        <view class="setting-info">
          <text class="setting-name">推送通知</text>
          <text class="setting-desc">接收应用推送通知</text>
        </view>
        <switch :checked="settings.enabled" @change="handleToggle('enabled', $event)" />
      </view>
      
      <!-- 消息通知 -->
      <view class="setting-item" :class="{ disabled: !settings.enabled }">
        <view class="setting-info">
          <text class="setting-name">消息通知</text>
          <text class="setting-desc">接收聊天消息通知</text>
        </view>
        <switch 
          :checked="settings.messageNotification" 
          :disabled="!settings.enabled"
          @change="handleToggle('messageNotification', $event)" 
        />
      </view>
      
      <!-- 好友请求通知 -->
      <view class="setting-item" :class="{ disabled: !settings.enabled }">
        <view class="setting-info">
          <text class="setting-name">好友请求</text>
          <text class="setting-desc">接收好友请求通知</text>
        </view>
        <switch 
          :checked="settings.friendRequestNotification"
          :disabled="!settings.enabled"
          @change="handleToggle('friendRequestNotification', $event)" 
        />
      </view>
      
      <!-- 系统通知 -->
      <view class="setting-item" :class="{ disabled: !settings.enabled }">
        <view class="setting-info">
          <text class="setting-name">系统通知</text>
          <text class="setting-desc">接收系统消息通知</text>
        </view>
        <switch 
          :checked="settings.systemNotification"
          :disabled="!settings.enabled"
          @change="handleToggle('systemNotification', $event)" 
        />
      </view>
    </view>
    
    <view class="settings-section">
      <view class="section-title">提醒方式</view>
      
      <!-- 声音提醒 -->
      <view class="setting-item" :class="{ disabled: !settings.enabled }">
        <view class="setting-info">
          <text class="setting-name">声音提醒</text>
          <text class="setting-desc">通知时播放提示音</text>
        </view>
        <switch 
          :checked="settings.sound"
          :disabled="!settings.enabled"
          @change="handleToggle('sound', $event)" 
        />
      </view>
      
      <!-- 震动提醒 -->
      <view class="setting-item" :class="{ disabled: !settings.enabled }">
        <view class="setting-info">
          <text class="setting-name">震动提醒</text>
          <text class="setting-desc">通知时震动提醒</text>
        </view>
        <switch 
          :checked="settings.vibration"
          :disabled="!settings.enabled"
          @change="handleToggle('vibration', $event)" 
        />
      </view>
    </view>
    
    <view class="settings-section">
      <view class="section-title">免打扰模式</view>
      
      <!-- 免打扰开关 -->
      <view class="setting-item">
        <view class="setting-info">
          <text class="setting-name">免打扰模式</text>
          <text class="setting-desc">在指定时间段内不接收通知</text>
        </view>
        <switch 
          :checked="settings.doNotDisturb"
          @change="handleToggle('doNotDisturb', $event)" 
        />
      </view>
      
      <!-- 免打扰时间段 -->
      <view v-if="settings.doNotDisturb" class="time-range-setting">
        <view class="time-item" @click="selectStartTime">
          <text class="time-label">开始时间</text>
          <text class="time-value">{{ settings.doNotDisturbStart }}</text>
          <text class="time-arrow">></text>
        </view>
        <view class="time-item" @click="selectEndTime">
          <text class="time-label">结束时间</text>
          <text class="time-value">{{ settings.doNotDisturbEnd }}</text>
          <text class="time-arrow">></text>
        </view>
      </view>
    </view>
    
    <!-- 重置按钮 -->
    <view class="reset-section">
      <button class="reset-btn" @click="resetSettings">恢复默认设置</button>
    </view>
  </view>
</template>

<script>
import notificationSettings from '@/utils/settings/notification-settings.js'

export default {
  name: 'NotificationSettings',
  data() {
    return {
      settings: {}
    }
  },
  onLoad() {
    this.loadSettings()
  },
  methods: {
    loadSettings() {
      this.settings = notificationSettings.getSettings()
      console.log('[NotificationSettings] 加载设置:', this.settings)
    },
    
    handleToggle(key, event) {
      const value = event.detail.value
      console.log(`[NotificationSettings] 切换设置: ${key} = ${value}`)
      
      if (notificationSettings.updateSetting(key, value)) {
        this.settings[key] = value
        
        uni.showToast({
          title: '设置已保存',
          icon: 'success',
          duration: 1500
        })
        
        this.$emit('settings-changed', this.settings)
      } else {
        uni.showToast({
          title: '设置保存失败',
          icon: 'error',
          duration: 1500
        })
      }
    },
    
    selectStartTime() {
      uni.showActionSheet({
        itemList: this.generateTimeList(),
        success: (res) => {
          const time = this.generateTimeList()[res.tapIndex]
          if (notificationSettings.updateSetting('doNotDisturbStart', time)) {
            this.settings.doNotDisturbStart = time
            uni.showToast({
              title: '开始时间已设置',
              icon: 'success',
              duration: 1500
            })
          }
        }
      })
    },
    
    selectEndTime() {
      uni.showActionSheet({
        itemList: this.generateTimeList(),
        success: (res) => {
          const time = this.generateTimeList()[res.tapIndex]
          if (notificationSettings.updateSetting('doNotDisturbEnd', time)) {
            this.settings.doNotDisturbEnd = time
            uni.showToast({
              title: '结束时间已设置',
              icon: 'success',
              duration: 1500
            })
          }
        }
      })
    },
    
    generateTimeList() {
      const times = []
      for (let h = 0; h < 24; h++) {
        times.push(`${String(h).padStart(2, '0')}:00`)
        times.push(`${String(h).padStart(2, '0')}:30`)
      }
      return times
    },
    
    resetSettings() {
      uni.showModal({
        title: '恢复默认设置',
        content: '确定要恢复通知设置为默认值吗？',
        success: (res) => {
          if (res.confirm) {
            if (notificationSettings.reset()) {
              this.loadSettings()
              uni.showToast({
                title: '已恢复默认设置',
                icon: 'success',
                duration: 1500
              })
              this.$emit('settings-changed', this.settings)
            } else {
              uni.showToast({
                title: '恢复失败',
                icon: 'error',
                duration: 1500
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.notification-settings {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
}

.settings-section {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.section-title {
  padding: 24rpx 30rpx 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #2d3436;
  background: #f8f9fa;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: opacity 0.3s ease;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item.disabled {
  opacity: 0.5;
}

.setting-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.setting-name {
  font-size: 28rpx;
  color: #2d3436;
  font-weight: 500;
}

.setting-desc {
  font-size: 24rpx;
  color: #636e72;
}

.time-range-setting {
  padding: 0 30rpx 20rpx;
}

.time-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin-top: 16rpx;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.time-item:active {
  background: #e9ecef;
}

.time-label {
  font-size: 26rpx;
  color: #2d3436;
}

.time-value {
  flex: 1;
  text-align: right;
  font-size: 26rpx;
  color: #667eea;
  font-weight: bold;
  margin-right: 12rpx;
}

.time-arrow {
  font-size: 20rpx;
  color: #b2bec3;
}

.reset-section {
  padding: 20rpx 0;
}

.reset-btn {
  background: white;
  color: #e74c3c;
  border: 2rpx solid #e74c3c;
  border-radius: 12rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.reset-btn:active {
  background: #fdf2f2;
}
</style>
